<template>
	<view class="charging">
		<view class="header">
			<image class="image" src="https://carching.cd1a.cn/images/mini_program/bubble.png"></image>
			<charging :data="standFee" />
		</view>
		<view class="block">
			<view class="standard">收费标准</view>
			<view class="content">
				<view class="box">
					<text>电费</text>
					<text>{{ standFee.unit_price ? standFee.unit_price : 1.3 }}<text>元/kWh</text></text>
				</view>
				<view class="box-border">
					<text>服务费</text>
					<text>{{ standFee.service_fee ? standFee.service_fee : 0.2 }}<text>元/kWh</text></text>
				</view>
			</view>
		</view>
		<view class="block-second">
			<view class="standard">充电信息</view>
			<view class="content">
				<view class="box">
					<text>当前电流</text>
					<text>{{ standFee.current ? standFee.current : 0 }}<text>A</text></text>
				</view>
				<view class="box-border">
					<text>当前电压</text>
					<text>{{ standFee.voltage ? standFee.voltage : 235.7 }}<text>V</text></text>
				</view>
				<view class="box-border">
					<text>当前功率</text>
					<text>{{ standFee.electric_power ? standFee.electric_power : 0 }}<text>W</text></text>
				</view>
			</view>
		</view>
		<button v-if="standFee.code == '2' || standFee.code == '1' || standFee.code == '5'" class="finshed"
			@click="endCharg" :disabled="new_status ? true : false">停止充电</button>
		<button v-else-if="standFee.code == '3'" class="button" @click="finshed">结束充电</button>
		<button v-else-if="standFee.code == '4'" class="button" style="background-color: #cfcfcf;"
			@click="starting">开始充电</button>
		<!-- <button v-else-if="standFee.code == '6'" class="button" @click="go_on">继续充电</button> -->
		<button v-else-if="use" class="button" disabled="true">开始充电</button>
		<button v-else class="button" @click="startCharg" :disabled="status ? true : false">开始充电</button>
	</view>
</template>

<script>
	import uniPopup from "../../components/uni-popup/uni-popup.vue"
	import uniPopupMessage from "../../components/uni-popup/uni-popup-message.vue"
	import uniPopupDialog from "../../components/uni-popup/uni-popup-dialog.vue"
	import charging from "../../components/charging.vue"
	import paths from "../../config/path.js"
	import {
		post
	} from "../../api/index.js"
	export default {
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			charging
		},
		data() {
			return {
				arr: "",
				standFee: 0.00,
				data: "",
				codeNum: "",
				flashUrl: "",
				logId: "",
				startTime: "",
				status: false,
				new_status: false,
				judge: "",
				type: "",
				use: ""
			}
		},
		onLoad(option) {
			// 如果正在充电状态还未结束充电时
			if (option.type) {
				let codeNum = uni.getStorageSync("codeNum")
				let logId = uni.getStorageSync("logId")
				let flashUrl = paths.flash
				this.startTime = uni.getStorageSync("startTime")
				this.flashUrl = flashUrl
				this.logId = logId
				this.codeNum = codeNum
				this.use = true
				// 直接获取刷新充电接口
				post(flashUrl, {
					code_num: codeNum,
					log_id: logId
				}).then(res => {
					console.log(res)
					this.standFee = res.data
					// 充电完成
					if (res.data.code == "3") {
						uni.showToast({
							title: res.data.msg,
							icon: "none"
						})
					} else if (res.data.code == "403" || res.data.code == "5" || res.data.code == "1") {
						// 403信息不全 5充电桩故障 1设备离线
						this.judge = 1
						uni.showModal({
							content: res.data.msg,
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.reLaunch({
										url: "../index/index"
									})
								}
							}
						})
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: "none"
						})
					}
				})
			}
		},
		methods: {
			// 继续充电
			// go_on() {
			// 	let url = paths.goOn
			// 	post(url, {
			// 		code_num: this.codeNum,
			// 		log_id: this.logId
			// 	}).then(res => {
			// 		console.log(res)
			// 		this.standFee = res.data
			// 	})
			// },
			// 时间详情
			formatDate() {
				let date = new Date()
				let h = date.getHours()
				h = h < 10 ? ("0" + h) : h
				let m = date.getMinutes()
				m = m < 10 ? ("0" + m) : m
				let s = date.getSeconds()
				s = s < 10 ? ("0" + s) : s
				return h + ":" + m + ":" + s
			},
			// 分钟秒计算
			setTime(value) {
				let date = new Date(value)
				let time = date.getTime() // 时间戳计算时间差值
				return time
			},
			// 开始充电
			startCharg() {
				let that = this
				let codeNum = uni.getStorageSync("codeNum")
				let userId = uni.getStorageSync("userInfo")
				let url = paths.start // 开始充电路径
				that.codeNum = codeNum
				that.status = true
				post(url, {
					userid_locked: userId.userid_locked,
					code_num: codeNum
				}).then(res => {
					console.log(res)
					if (res.data.code == "2") {
						uni.showToast({
							title: res.data.msg,
							icon: "none",
							success: function() {
								let startTime = that.setTime(new Date())
								let flashUrl = paths.flash // 刷新充电路径
								uni.setStorageSync("startTime", startTime)
								uni.setStorageSync("logId", res.data.log_id)
								that.startTime = startTime
								that.logId = res.data.log_id
								that.flashUrl = flashUrl
								post(flashUrl, {
									code_num: codeNum,
									log_id: res.data.log_id
								}).then(res => {
									console.log(res)
									that.standFee = res.data
									if (res.data.code == "3") {
										uni.showToast({
											title: res.data.msg,
											icon: "none"
										})
									} else if (res.data.code == "403" || res.data.code == "5" || res.data.code == "1") {
										that.judge = 1
										uni.showModal({
											content: res.data.msg,
											showCancel: false,
											success: function(res) {
												if (res.confirm) {
													uni.redirectTo({
														url: "../index/index"
													})
												}
											}
										})
									} else {
										uni.showToast({
											title: res.data.msg,
											icon: "none"
										})
									}
								})
							},
						})
					} else if (res.data.code == "3") {
						uni.showModal({
							content: res.data.msg,
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.redirectTo({
										url: '../index/index'
									})
								}
							}
						})
					} else {
						uni.showModal({
							content: res.data.msg,
							showCancel: false
						})
						that.status = false
					}
				})
			},
			// 正在充电时等待后台状态改变
			starting() {
				uni.showToast({
					title: "设备连接中请稍等...",
					icon: "none"
				})
			},
			// 结束充电
			endCharg() {
				// 停止请求
				let that = this
				let endTime = this.setTime(new Date())
				if (endTime - this.startTime < 120000) {
					uni.showToast({
						title: "充电时间不足两分钟, 请稍后再试!",
						icon: "none"
					})
				} else {
					let url = paths.end
					that.new_status = true
					uni.showLoading({
						title: '请稍等...',
						success: function() {
							post(url, {
								code_num: that.codeNum,
								startTime: that.startTime,
								finshTime: endTime,
								unit_price: that.standFee.unit_price,
								service_fee: that.standFee.service_fee,
								logId: that.logId
							}).then(res => {
								console.log(res)
								uni.showToast({
									title: res.data.msg,
									icon: "none",
									success: function() {
										uni.reLaunch({
											url: res.data.url
										})
									}
								})
							})
						}
					})
				}
			},
			// 设置定时器
			timer() {
				setTimeout(() => {
					post(this.flashUrl, {
						code_num: this.codeNum,
						log_id: this.logId
					}).then(res => {
						// console.log(res)
						this.standFee = res.data
						if (res.data.code == "3") {
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							})
						} else if (res.data.code == "403" || res.data.code == "5" || res.data.code == "1") {
							// 在当前页面刷新接口时 一旦有报错 就停止请求
							this.judge = 1
							uni.showModal({
								content: res.data.msg,
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										uni.redirectTo({
											url: "../index/index"
										})
									}
								}
							})
						}
					})
				}, 5000)
			},
			finshed() {
				// 结束充电到订单页面
				uni.redirectTo({
					url: "/pages/order/index"
				})
			}
		},
		watch: {
			// 使用深层监听
			standFee: {
				handler(newVal) {
					if(!this.judge) {
						this.timer()
					}
				},
				deep: true
			}
		}
	}
</script>

<style>
	page {
		background-image: linear-gradient(#282121, #837F7F, #282121);
	}
</style>
<style scoped>
	.image {
		width: 100%;
		height: 90vh;
	}

	.header {
		position: relative;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.block {
		position: absolute;
		top: 45%;
		left: 5%;
		width: 90%;
		z-index: 2;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);
	}

	.block-second {
		position: absolute;
		top: 64%;
		left: 5%;
		width: 90%;
		z-index: 2;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);
	}

	.standard {
		background-color: #959090;
		letter-spacing: 1px;
		color: #FFFFFF;
		padding: 10rpx 30rpx;
	}

	.content {
		padding: 0 30rpx;
		background-color: #6E6969;
	}

	.box {
		display: flex;
		justify-content: space-between;
		padding: 15rpx 0;
		color: #9e9999;
		letter-spacing: 1px;
	}

	.box-border {
		display: flex;
		justify-content: space-between;
		border-top: .5px solid #5f5c5c;
		padding: 15rpx 0;
		color: #9e9999;
		letter-spacing: 1px;
	}

	.button,
	.finshed {
		position: fixed;
		bottom: 0;
		width: 100%;
		letter-spacing: 2px;
		color: #FFFFFF;
		border-radius: 0px;
		height: 145rpx;
	}

	.button {
		background-color: #0DA297;
	}

	.finshed {
		background-color: #FF5661;
	}

	.finshed:active,
	.button:active {
		background-color: #cfcfcf;
	}
</style>
